<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted } from 'vue'
import type { ApplyRefundParam } from '@/types/order'
import { applyRefundAPI } from '@/services/order'
import { useMemberStore } from '@/stores'
const { getUserInfo } = useMemberStore()
// 子调父
const emit = defineEmits<{
  (event: 'close'): void
  (event: 'submit'): void
}>()

const props = defineProps<{
  orderId: number
  paymentId: number
  orderStatus: number
}>()

// 1. 定义表单数据
const formData = reactive({
  reason: null,
  textareaval: '',
})

const reasonlist = ref([
  {
    text: '不想要了',
    value: 0,
  },
  {
    text: '配送太慢',
    value: 1,
  },
  {
    text: '商品问题',
    value: 2,
  },
  {
    text: '口味不符',
    value: 3,
  },
  {
    text: '重复下单',
    value: 4,
  },
  {
    text: '其他',
    value: 5,
  },
])
const rules: UniHelper.UniFormsRules = {}
const formRef = ref<UniHelper.UniFormsInstance>()

// 4. 提交方法
const submit = async () => {
  const res: any = await formRef.value?.validate?.()
  console.log('表单数据信息：', res)

  if (!res.reason) {
    uni.showToast({ icon: 'none', title: '请选择退款原因' })
    return
  }

  let reasonVal: any = reasonlist.value.find((item) => item.value === res.reason)?.text

  const index = reasonlist.value?.length - 1
  if (String(res.reason) === String(index)) {
    if (!res.textareaval) {
      uni.showToast({ icon: 'none', title: '请填写其他退款原因' })
      return
    } else {
      reasonVal = res.textareaval
    }
  }

  await applyRefundAPI({
    reason: reasonVal,
    refundReasonType: res.reason,
    orderId: props.orderId,
    paymentId: props.paymentId,
    type: 1,
    userId: getUserInfo().id,
    orderStatus: props.orderStatus,
  })

  emit('submit')
}
</script>

<template>
  <view class="refund-panel">
    <view class="title"> 申请退款原因: </view>
    <uni-forms ref="formRef" :model="formData" :rules="rules">
      <uni-forms-item name="reason" label="原因">
        <uni-data-checkbox
          selectedColor="#4CAF50"
          selectedTextColor="#000"
          borderColor="#4CAF50"
          mode="list"
          icon="left"
          v-model="formData.reason"
          :localdata="reasonlist"
        />
      </uni-forms-item>
      <!-- 姓名输入 -->
      <uni-forms-item name="textareaval" label="其他">
        <uni-easyinput
          type="textarea"
          v-model="formData.textareaval"
          placeholder="请输入内容"
          :input-style="{ color: 'red', fontSize: '16px', padding: '10px' }"
        />
      </uni-forms-item>

      <!-- 提交按钮 -->
      <view class="submit-button">
        <button class="submit-btn" @click="submit">提交申请</button>
      </view>
    </uni-forms>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';

:deep(.uni-easyinput__content-textarea) {
  padding: 5px 10px;
  color: red;
}
.refund-panel {
  padding: 0 32rpx;
  border-radius: 24rpx 24rpx 0 0;
  position: relative;
  background-color: #fff;

  .title {
    font-size: 32rpx;
    font-weight: 500;
    padding: 20rpx 30rpx;
  }

  // ::v-deep .uni-easyinput__content-textarea {
  //   line-height: 1.5;
  //   font-size: 28rpx;
  //   color: red;
  //   height: 60rpx;
  //   min-height: 60rpx;
  //   /* #ifndef APP-NVUE */
  //   min-height: 60rpx;
  //   width: auto;
  //   /* #endif */
  // }
  // .checkbox-g {
  //   .uni-data-checklist {
  //     background-color: red !important;
  //   }
  // }

  .submit-button {
    padding: 32rpx;

    .submit-btn {
      width: 100%;
      height: 96rpx;
      background-color: $color;
      color: white;
      border: none;
      border-radius: 43rpx;
      font-size: $font-medium-size;
      line-height: 96rpx;
      text-align: center;
    }
  }
}
</style>
